<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>积分兑礼品</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/1px.css" />
		<style>
			html {
				font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
			}
			
			body {
				overflow-x: hidden;
				background-color: #fff !important;
			}
			
			.mui-content {
				background-color: #fff;
			}
			/*头像*/
			
			.flex {
				display: flex;
			}
			
			.user-info {
				padding: 3px 0;
			}
			
			.header {
				flex: 3;
				text-align: center;
			}
			
			.header img {
				height: 70px;
				width: 70px;
				vertical-align: middle;
			}
			
			.info {
				flex: 5;
				font-size: 14px;
				line-height: 24px;
			}
			
			.change-btn {
				flex: 2;
			}
			/**/
			
			.exchange {
				padding: 0 2%;
				margin: 5px 0;
			}
			
			.text {
				font-size: 13px;
				text-align: center;
			}
			
			.line {
				margin-top: 10px;
			}
			/*列表*/
			
			.goods-list {
				list-style: none;
			}
			
			.goods-each {
				padding: 5px 5px;
				position: relative;
			}
			
			.goods-each:after {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.img-box {
				flex: 2;
			}
			
			.img-box img {
				height: 70px;
				width: 70px;
				vertical-align: middle;
				text-align: center;
			}
			
			.goods-info-box {
				flex: 4;
				font-size: 14px;
				line-height: 24px;
			}
			
			.goods-info-box div {
				margin-left: 5px;
			}
			
			.goods-op-box {
				flex: 3;
				position: relative;
				height: 100%;
			}
			
			.recovery-num {
				position: absolute;
				right: 20px;
				font-size: 13px;
			}
			
			.choose-btn {
				width: 70%;
				position: absolute;
				bottom: -70px;
				right: 5px;
				text-align: center;
				background-color: #FF9800;
      	border-color: #FF9800
			}
			.choose-btn:active{
				background-color: #e6c697;
			}
			/*滚动区*/
			
			.mui-scroll-wrapper {
				top: 115px;
				bottom: 88px;
			}
			/*底部*/
			
			.total-info {
				height: 39px;
				line-height: 39px;
				background-color: #fff;
				position: absolute;
				bottom: 39px;
				width: 100%;
				font-size: 14px
			}
			
			.total-info span {
				margin-left: 10px;
			}
			
			footer {
				height: 42px;
				line-height: 42px;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				font-size: 15px
			}
			
			footer:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 42px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.back-btn {
				background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			
			.submit-next-btn {
				background-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			.flex-item{
				flex: 1;
			}
		</style>
	</head>

	<body>
		<script src="../js/mui.min.js"></script>
		<div class="mui-content">
			<div class="user-info flex vux-1px-b">
				<div class="header">
					<img src="" alt="" />
				</div>
				<div class="info">
					<div></div>
					<div>ID：</div>
					<div>当前积分：</div>
				</div>
				<div class="change-btn">
				</div>
			</div>
			<!---->
			<div class="exchange mui-row">
				<div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
				<div class="text mui-col-sm-4 mui-col-xs-4">兑换积分</div>
				<div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
			</div>
			<!--礼品-->
			<div id="refreshContainer" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="goods-list mui-table-view mui-table-view-chevron vux-1px-t">

					</ul>
					<script id="goodsList" type="text/html">
						<%for(var i=0;i<list.length;i++){%>
						<li class="goods-each">
							<div class="flex">
								<div class="img-box">
									<img src="<%=imgPath+list[i].cutImg%>" alt="" />
								</div>
								<div class="goods-info-box">
									<div class="goods-name">
										<%=list[i].goodsName%>
									</div>
									<div class="goods-id">货品ID：
										<%=list[i].goodsId%>
									</div>
									<div class="goods-num">积分：
										<%=list[i].score%>
									</div>
								</div>
								<div class="goods-op-box">
									<span class="recovery-num">回收数量:<%=list[i].recyclingAmount%></span>
									<button type="button" data-index="<%=i%>" class="edit-choose-btn mui-btn mui-btn-primary choose-btn">调整</button>
								</div>
							</div>
						</li>
						<%}%>
					</script>
				</div>
			</div>
			<!--底部-->
			<div class="total-info vux-1px-t">
				<span>回收：0款</span> <span>共：0个</span> <span>积分：+0</span>
			</div>
				<footer class="flex btn-box">
					<div class="flex-item">
						<div class="mui-btn back-btn mui-action-back">上一步</div>
					</div>
					<div class="flex-item">
						<div class="mui-btn submit-next-btn">提交</div>
					</div>
				</footer>
			<!---->
		</div>
		<script src="../config.js"></script>
		<script src="../js/template-native.js"></script>
		<script type="text/javascript">
			mui.init({
				beforeback: function() {
					var recoverGoods = plus.webview.getWebviewById('recovery-goods')
					console.log('recycle.goods',JSON.stringify(recycle.goods))
					mui.fire(recoverGoods, 'changeNum', {
						goods: recycle.goods
					})
				}
			})
			var currentShopObj = {},
				member = {},
				recycle = {
					merchantId: '',
					storeId: '',
					storeName: '',
					header: '',
					userId: '',
					openId: '',
					userNick: '',
					userScore: '',
					goods: []
				}
			mui.plusReady(function() {
				scroll()
				receiveParams()
				setUser()
				setfooter()
				bindEvent()
			})

			function scroll() {
				//滚动
				mui('.mui-scroll-wrapper').scroll({
					scrollY: true,
					bounce: true,
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
				});
			}


			function receiveParams() {
				var self = plus.webview.currentWebview()
				currentShopObj = currentShopObj
				member = self.userInfo
				recycle = self.recycle
				console.log(JSON.stringify(recycle))
				setPage()
			}
			//头像 页尾部
			function setUser() {
				var headImg = null
				if(member.header.indexOf('http') === -1) {
					headImg = config.imgPath + member.header
				} else {
					headImg = member.header
				}
				document.querySelector(".header img").setAttribute('src', headImg)
				var userI = document.querySelectorAll(".info>div")
				if(member.userName) {
					userI[0].innerText = member.userName
				} else {
					userI[0].innerText = '--'
				}
				userI[1].innerText = 'ID：' + member.userId
				userI[2].innerText = '当前积分：' + member.point
			}

			function setfooter() {
				var infoAll = document.querySelectorAll(".total-info span")
				infoAll[0].innerText = '回收：' + recycle.goods.length + '款'
				var totalNum = 0,
					totalScore = 0
				recycle.goods.forEach(function(item) {
					totalNum += item.recyclingAmount * 1
					totalScore += item.recyclingAmount * item.score
				})
				recycle.userScore = totalScore + member.point
				infoAll[1].innerText = '共' + totalNum + '个'
				infoAll[2].innerText = '积分+' + totalScore
			}
			//货品
			function setPage() {
				var html = template('goodsList', {
					list: recycle.goods,
					imgPath: config.imgPath
				})
				mui('.goods-list')[0].innerHTML = html
			}
			//绑定监听
			function bindEvent() {
				//修改
				mui('.goods-list').on('tap', '.edit-choose-btn', function(e) {
					var index = this.getAttribute('data-index')
					var returnNum = recycle.goods[index].recyclingAmount
					var btn = ['取消', '确定']
					mui.prompt('请输入回收数量', returnNum, '调整', btn, function(e) {
						if(e.index == 1) {
							if(e.value) {

								recycle.goods[index].recyclingAmount = e.value
								document.querySelectorAll(".recovery-num")[index].innerText = '回收数量：' + e.value
								setfooter()
							} else {
								mui.toast('请填写回收数量！')
							}
						}
					}, 'div')
					document.querySelector(".mui-popup-input input").type = 'number'
				})
				//提交
			
				var ifSubmit = false
				document.querySelector(".submit-next-btn").addEventListener('tap', function() {
					console.log(JSON.stringify(recycle))
					if(!ifSubmit) {
						ifSubmit = true;

						config.ajax({
							url: '/recycling/submit',
							data: recycle,
							success: function(res) {
							  console.log(JSON.stringify(res))
								if(res.result === 1) {
									var num = res.recyclingId
									var title = '回收'
									mui.openWindow({
										url: './userInfo.html',
										id: 'userInfo',
										styles: {
											top: 0, //新页面顶部位置
											bottom: 0, //新页面底部位置
											titleNView: {
												titleText: title,
												titleColor: "#000000",
												titleSize: "17px",
												backgroundColor: "#F7F7F7",
												autoBackButton: true,
												//                homeButton: true,
												buttons: [{
													float: "right",
													fontSize: "18px",
													fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
													text: "\ue602",
													onclick: function() {
														var allPage = plus.webview.all()
														var nowPage = plus.webview.getWebviewById('index')
														for(var i = 0; i < allPage.length; i++) {
															if(allPage[i].getURL() !== nowPage.getURL()) {
																plus.webview.close(allPage[i]);
															}
														}
													}
												}],
												splitLine: {
													color: "#CCCCCC",
													height: "1px"
												}
											}
										},
										extras: {
											currentShopObj: currentShopObj,
											member: member,
											score: recycle.userScore,
											type: 1,
											num: num
										}
									})
								} else {
									mui.toast(res.errormsg)
									setTimeout(function() {
										ifSubmit = false
									}, 1000)
								}
							},
							error:function(res){

                mui.toast(res.errormsg)
                ifSubmit = false
							}
						})
					}
				})
			}
		</script>
	</body>

</html>